{% extends 'cms/cms_base.html' %}
{% from 'common/_macros.html' import static %}
{% block title -%}
    板块管理
{%- endblock %}

{% block head -%}
    <script src="{{ static('cms/js/board.js') }}"></script>
{%- endblock %}

{% block page_title -%}
    {{ self.title() }}
{%- endblock %}

{% block main_content -%}
    <div class="top-box">
        <button class="btn btn-warning" style="float: right;" data-toggle="modal" data-target="#myModal">添加板块</button>
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>板块名称</th>
                <th>板块描述</th>
                <th>帖子数量</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for board in boards %}
                <tr data-name="{{ board.name }}" data-desc="{{ board.desc }}" data-id="{{ board.id }}">
                    <td>{{ board.name }}</td>
                    <td>{{ board.desc }}</td>
                    <td>{{ board.posts|length }}</td>
                    <td>{{ board.create_time }}</td>
                    <td>
                        <button class="btn btn-default btn-xs edit-board-btn">编辑</button>
                        <button class="btn btn-danger btn-xs delete-board-btn">删除</button>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <!-- 用来添加板块的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">输入要添加信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">板块名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="name" placeholder="输入板块名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">板块描述：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="desc" placeholder="输入100字符以内的板块描述信息">
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="save-board-btn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->
{%- endblock %}